<template>
  <div class="card" :class="{'animated':isDel,'zoomOutLeft':isDel}">
    <div @click="batch.checked=!batch.checked" class="h">
      <h1></h1>
      <b>{{batch.BH}}</b>
      {{BType[parseInt(batch.NeedType)]}}{{batch.NeedYear?NeedYear[parseInt(batch.NeedYear)]:''}} {{batch.CType}}
      <b>{{batch.CDName}}</b>
      <van-checkbox class="checkbox"    v-model="batch.checked"></van-checkbox>
    </div>
    <ul @click="sel" class="cs">
      <li>
        <h5>等级</h5>
        <b>{{batch.DengJi}}</b>
      </li>
      <li>
        <h5>长度</h5>
        <b>{{batch.ChangDu}}</b>
      </li>
      <li>
        <h5>强力</h5>
        <b>{{batch.QiangLi}}</b>
      </li>
      <li>
        <h5>马值</h5>
        <b>{{batch.MaZhi1}}{{batch.MaZhi2?'-'+batch.MaZhi2:''}}</b>
      </li>
      <li>
        <h5>含杂</h5>
        <b>{{fix(batch.HanZa)}}</b>
      </li>
      <li>
        <h5>整齐度</h5>
        <b>{{fix(batch.ZhengQiDu)}}</b>
      </li>
    </ul>
    <div class="ck">
      <div class="f3">
        <font class="max8">
          <font class="c999">交货地：</font>
          {{batch.JHD}}
        </font>
      </div>
    </div>
    <div class="price">
      <div class="time">
        <h4 class="fl" @click="edit(batch.ID)">
          <i class="iconfont icon-xiugai-copy"></i> 修改
        </h4>
        <h4 class="fr" @click="del(batch.ID)">
          <i class="iconfont icon-shanchu"></i>删除
        </h4>
      </div>
      <div class="f3">
        <h4>{{batch.BestPrice>0?batch.BestPrice:'暂无货源'}}</h4>平台最优价格
      </div>
      <div>
        <button @click="go">
          <i class="num">{{batch.BatchNum}}</i> 查看资源
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";

import api from "@/api/api";
export default {
  props: {
    batch: Object
  },
  data() {
    return {
      BType: ["新疆地方棉", "进口棉 美金交易", "进口棉 人民币交易", "地产棉",'',"新疆兵团棉"],
      NeedYear: ["", "新棉", "拍储棉"],
      isDel: false,
     };
  },
  computed:{
      checked(){
          return this.batch.checked;
      }
  },
  methods: {
      sel(){
          this.$emit('itemchecked',this.batch.BH);
       },
    go() {
      this.$router.push("/user/batchMatch/" + this.batch.ID);
    },
    edit(ID) {
      this.$router.push("/user/demandAdd?id=" + this.batch.ID);
    },
    del(ID) {
      Dialog.confirm({
        title: "提示",
        message: "确定删除？"
      })
        .then(() => {
          api
            .delDemandByID({
              ID: this.batch.ID,
              UserID: this.batch.UserID
            })
            .then(res => {
              this.isDel = true;
              Toast.success({ message: "删除成功！", duration: 800 });
              this.$emit("delItem", this.batch);
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    fix(s) {
      if (s) {
        return s;
      } else {
        return "-";
      }
    }
  }
};
</script>

<style scoped lang='less'>
.card {
  background: #fff;
  margin: 5px 0 0 0;
  padding: 5px 10px 0 10px;
  text-align: left;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  .checkbox {
    position: absolute;
    top: -2px;
    right: 0.5em;
     
  }
  .price {
    width: 100%;
    display: flex;
    height: 3em;
    line-height: 3em;
    text-align: center;
    .time {
      color: #2cb98e;
      line-height: 1em;
      i {
        display: block;
        font-size: 20px;
      }
      h4 {
        font-size: 14px;
        margin-top: 0.5em;
        width: 50%;
        text-align: center;
      }
    }
    > div {
      flex: 2;
      border: 1px solid #f0f0f0;
      border-right: 0;
    }
    > div:last-child {
      border-right: 1px solid #f0f0f0;
    }
    .f3 {
      flex: 3;
      line-height: 1.2em;
      font-size: 12px;
      color: #333;
      h4 {
        margin-top: 0.4em;
        color: #ff5500;
        font-size: 22px;
        margin-bottom: 5px;
      }
    }
    button {
      outline: 0;
      border: 0;
      width: 100%;
      background: #2cb98e;
      color: #fff;
      position: relative;
      .num {
        border-radius: 50%;
        height: 1.5em;
        padding: 0.1em;
        min-width: 1.5em;
        font-size: 12px;
        color: #fff;
        background: #ff5500;
        top: 0.3em;
        right: 0.2em;
        display: block;
        line-height: 1.5em;
        position: absolute;
      }
    }
  }
  .h {
    padding-left: 10px;
   }
  > div {
    position: relative;
    h1 {
      position: absolute;
      top: 3px;
      left: 0;
      width: 4px;
      height: 1em;
      font-size: 16px;
      background: #2dbaba;
      padding: 0;
      margin: 0;
    }
  }
  .cs {
    margin-top: 2px;
    color: #333;
    display: flex;
    width: 100%;
    font-size: 16px;
    li {
      flex: 1;
      border: 1px solid #f2f2f2;
      text-align: center;
      border-right: 0;
    }
    li:last-child {
      border-right: 1px solid #f2f2f2;
    }
    h5 {
      color: #333;
      height: 2em;
      line-height: 2em;
    }
    b {
      font-weight: normal;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .ck {
    display: flex;
    height: 2em;
    line-height: 2em;
    text-align: center;
    font-size: 14px;
    .max8 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 12em;
      display: inline-block;
    }
    > div {
      border: 1px solid #f2f2f2;
      border-top: 0;
      border-right: 0;
    }
    > div:last-child {
      border-right: 1px solid #f2f2f2;
    }
    .f4 {
      flex: 4;
    }
    .f3 {
      flex: 3;
      text-align: left;
      padding-left: 1em;
    }
  }
}
</style>